import { KeyboardEvent } from "react";
import todoListStore from "../../store/todoListStore";

function Header() {
  // React中绑定的事件都是合成事件
  // 合成事件特点：做了事件的兼容性处理
  const handleAddTodo = (e: KeyboardEvent) => {
    // 1. 判断是否按下回车键
    if (e.key !== "Enter") return;
    // 2. 获取用户输入的值
    const todoName = (e.target as HTMLInputElement).value.trim();
    // 3. 判断输入的值不能为空
    if (!todoName) return;
    // 4. 添加todo
    todoListStore.addTodo(todoName);
    // 5. 清空用户输入的内容
    // todoName = ""; // 不行
    (e.target as HTMLInputElement).value = "";
  };

  return (
    <div className="todo-header">
      <input type="text" placeholder="请输入你的任务名称，按回车键确认" onKeyUp={handleAddTodo} />
    </div>
  );
}

export default Header;
